<template>
    <div class="cartIndex">
        <van-nav-bar title="购物车" />

        <!-- banner -->
        <div class="banner">
            <img src="/img/cartBanner.png" alt="">
        </div>

        <!-- 购物车列表 -->
        <van-swipe-cell v-if="cartList.length" v-for="item in cartList" :key="item.id">
            <div class="configGoods" >
                <van-checkbox v-model="item.selected" checked-color="#88afd5"
                    @click="handelSelectOne(item.skuId, item.selected, item.count)" />
                <div class="left">
                    {{ item.name }}
                    <p>{{ configArr }} <br> 仅限打包带走</p>
                </div>
                <span class="price">￥{{ item.price }}</span>
                <van-stepper v-model="item.count" theme="round" button-size="22" disable-input
                    @click="changeGoodsNum(item.skuId, item.selected, item.count)" />
            </div>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="delGoods(item.skuId)"/>
            </template>
        </van-swipe-cell>
        <!-- 如果购物车列表为空 -->
        <p v-else class="noGoods">
            购物车暂无商品
            <router-link to="/goodsList">去选购</router-link>
        </p>

        <!-- 猜你喜欢 -->
        <div class="guessLike">
            <div class="likeTop">
                猜你喜欢
                <span><van-icon name="replay" /> 换一批</span>
            </div>
            <div class="likeList">
                <div class="likeBox">
                    <img src="/img/cartLike.png" alt="">
                    <h4 class="tittle">金枪鱼谷物沙拉</h4>
                    <p class="dec">tuna and mixed sa..</p>
                    <div class="price">
                        ￥25.08 <span>￥38</span>
                        <van-button icon="plus" type="primary" size="mini" round class="addCartBtn" color="#88afd5" />
                    </div>
                </div>
                <div class="likeBox">
                    <img src="/img/cartLike.png" alt="">
                    <h4 class="tittle">金枪鱼谷物沙拉</h4>
                    <p class="dec">tuna and mixed sa..</p>
                    <div class="price">￥25.08 <span>￥38</span>
                        <van-button icon="plus" type="primary" size="mini" round class="addCartBtn" color="#88afd5" />
                    </div>
                </div>
                <div class="likeBox">
                    <img src="/img/cartLike.png" alt="">
                    <h4 class="tittle">金枪鱼谷物沙拉</h4>
                    <p class="dec">tuna and mixed sa..</p>
                    <div class="price">￥25.08 <span>￥38</span>
                        <van-button icon="plus" type="primary" size="mini" round class="addCartBtn" color="#88afd5" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 提交 -->
        <div class="tabbar">
            <p class="sum">应付合计 <span class="sumPrice">￥{{ totolPrice }}</span></p>
            <van-button type="primary" color="#90c0ef" square>去结算</van-button>
        </div>


    </div>

</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router'
import { showToast } from 'vant';
import axios from 'axios'

const route = useRoute()
// console.log(route.query);
// 由商品详情页传过来的商品配置参数
const configArr = route.query.configArr

const checked = ref(true);
const onSubmit = () => showToast('点击按钮');

// 购物车列表
const cartList = ref([])

// 获取购物车
onMounted(async () => {
    try {
        let { data } = await axios.get('http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart')
        console.log(data.result);
        cartList.value = data.result
    } catch (error) {
        console.error(error)
    }
})

// 点击单选修改状态
const handelSelectOne = async (id, selected, count) => {
    try {
        let res = await axios.put(`http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart/${id}`, { selected, count })
        // console.log(res);
    } catch (error) {
        console.error(error)
    }
}

//点击步进器修改商品数量
const changeGoodsNum = async (id, selected, count) => {
    try {
        let res = await axios.put(`http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart/${id}`, { selected, count })
        // console.log(res);
    } catch (error) {
        console.error(error)
    }
}

//价格合计总数
const totolPrice = computed(() => {
    return cartList.value?.filter(item => item.selected).reduce((prev, item) => {
        return prev + item.price * item.count
    }, 0)
})

// 删除一条购物车商品
const delGoods = ()=>{}



</script>

<style lang="scss" scoped>
.cartIndex {
    background-color: #f8f8f8;
    height: 100vh;

    .banner {
        img {
            width: 375px;
            height: 68px;
        }
    }

    .configGoods {
        width: 375px;
        height: 80px;
        box-sizing: border-box;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        color: rgba(80, 80, 80, 1);
        // border-top: 1px solid #f2f2f2;
        // border-bottom: 1px solid #f2f2f2;
        background-color: #fff;


        .left {
            position: absolute;
            left: 60px;
            font-size: 15px;
            font-weight: bold;

            p {
                font-size: 10px;
                line-height: 150%;
            }

        }

        .price {
            position: absolute;
            right: 110px;
            color: #383838;
            font-size: 18px;
            font-weight: bold;
        }
    }

    .delete-button {
        height: 100%;
    }

    .noGoods {
        width: 100%;
        height: 100px;
        text-align: center;
        line-height: 100px;
    }

    .guessLike {
        width: 345px;
        height: 212px;
        margin: 10px 15px;
        // background-color: pink;

        .likeTop {
            font-size: 15px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 6px 0;

            span {
                font-size: 11px;
                color: #90c0ef;
            }
        }

        .likeList {
            width: 345px;
            display: flex;
            justify-content: space-between;

            .likeBox {
                width: 108px;
                height: 180px;
                background-color: #fff;

                img {
                    width: 108px;
                    height: 108px;
                }

                .tittle {
                    font-size: 11px;
                    color: rgba(56, 56, 56, 1);
                    line-height: 150%;
                    font-weight: bold;
                }

                .dec {
                    width: 108px;
                    font-size: 10px;
                    line-height: 150%;
                    color: #a6a6a6;
                    overflow: hidden;
                }

                .price {
                    position: relative;
                    font-size: 12px;
                    color: #ff8d1a;
                    margin-top: 8px;

                    span {
                        color: #a6a6a6;
                        text-decoration: line-through;
                    }

                    .van-button {
                        position: absolute;
                        left: 82px;
                        bottom: -1px;
                        width: 18px;
                        height: 18px;
                    }
                }
            }
        }
    }

    .tabbar {
        position: absolute;
        bottom: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        width: 375px;
        height: 60px;
        background-color: #fff;
        padding-left: 20px;

        .sum {
            font-size: 14px;

            .sumPrice {
                font-size: 24px;
                font-weight: bold;
            }
        }

        .van-button {
            width: 119px;
            height: 60px;
            font-size: 16px;
        }


    }
}
</style>